<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Translation Service</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Translation Service</h1>
            <p>Translate English text using various Large Language Models</p>
        </header>

        <main>
            <form id="translation-form" action="/translate" method="POST">
                <div class="form-group">
                    <label for="text">Enter English text to translate:</label>
                    <textarea
                        id="text"
                        name="text"
                        rows="5"
                        placeholder="Enter English word or sentence..."
                        required
                    ></textarea>
                </div>

                <div class="form-group">
                    <label for="model">Select LLM Model:</label>
                    <select id="model" name="model">
                        {{range $model, $displayName := .ModelOptions}}
                        <option value="{{$model}}">{{$displayName}}</option>
                        {{end}}
                    </select>
                </div>

                <button type="submit" id="translate-btn">
                    <span class="btn-text">Translate</span>
                    <span class="btn-loading" style="display: none;">Translating...</span>
                </button>
            </form>

            <div id="result-container" class="result-container" style="display: none;">
                <h2>Translation Result</h2>
                <div class="result-content">
                    <div class="result-item">
                        <strong>Original:</strong>
                        <p id="original-text"></p>
                    </div>
                    <div class="result-item">
                        <strong>Model:</strong>
                        <p id="model-used"></p>
                    </div>
                    <div class="result-item">
                        <strong>Translation:</strong>
                        <p id="translation-result"></p>
                    </div>
                </div>
                <button id="new-translation-btn">Translate Another</button>
            </div>
        </main>
    </div>

    <script src="/static/js/main.js"></script>
</body>
</html>
